<template>
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>
  
      <a-form-item
        label="密码"
        name="password"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>
      <a-form-item
        label="邮箱"
        name="email"
      >
        <a-input v-model:value="formState.email" />
      </a-form-item>
      <a-form-item
        label="手机"
        name="mobile"
      >
        <a-input v-model:value="formState.mobile" />
      </a-form-item>
      <a-form-item
        label="角色"
        name="roleId"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.roleId" />
      </a-form-item>

      <a-form-item
        label="部门"
        name="deptId"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <!-- <a-input v-model:value="formState.deptId" /> -->

        <a-tree-select v-model:value="formState.deptId" :tree-data="treeData"> </a-tree-select>
      </a-form-item>

      <a-form-item
        label="状态"
        name="status"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
      <a-radio-group v-model:value="formState.status" >
          <a-radio value="0">锁定</a-radio>
          <a-radio value="1">有效</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="性别"
        name="ssex"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
      <a-radio-group v-model:value="formState.ssex" >
          <a-radio value="2">男</a-radio>
          <a-radio value="1">女</a-radio>
          <a-radio value="0">保密</a-radio>
        </a-radio-group>

      </a-form-item>

  
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </template>
  <script lang="ts" setup>
  import { reactive,ref } from 'vue';
  import type { TreeSelectProps } from 'ant-design-vue';

  const treeData = ref<TreeSelectProps['treeData']>([
  {
    label: 'parent 1',
    value: 'parent 1',
    children: [
      {
        label: 'parent 1',
        value: 'parent 1',
        children: [
          {
            label: 'parent 1-0',
            value: 'parent 1-0',
            children: [
              {
                label: 'my leaf',
                value: 'leaf1',
              },
              {
                label: 'your leaf',
                value: 'leaf2',
              },
            ],
          },
          {
            label: 'parent 1-1',
            value: 'parent 1-1',
          },
        ],
      },
      {
        label: 'parent 1-1',
        value: 'parent 1-1',
      },
    ],
  },
]);

  const formState = reactive<any>({});
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  
 
  </script>
  
  